<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="../lib/element-plus/theme-chalk/index.css">
    <style>
        .container {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }

        .el-col {
            padding: 10px;
            padding-top: 20px;
        }
    </style>
</head>
<body>


<div id="app" class="container">

    <el-row>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">仓库管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品信息</el-breadcrumb-item>

        </el-breadcrumb>
    </el-row>

    <el-row>
        <el-form>
            <el-row>
                <el-col span="8">
                    <el-form-item label-width="80" label="商品名称">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label-width="80" label="商品价格">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label-width="80">
                        <el-button type="primary">搜索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-row>
    <el-row>
        <el-button-group>
            <el-button type="success" @click="info.isVisible=true">添加</el-button>
            <el-button type="info">打印</el-button>
        </el-button-group>
    </el-row>
    <el-row>
        <el-table :data="products">
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="商品价格"></el-table-column>
            <el-table-column prop="desc" label="商品描述"></el-table-column>
            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-button type="warning">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-row>


    <el-dialog v-model="info.isVisible">


         <el-form label-width="120">

             <el-form-item  label="商品名称">
                  <el-input v-model="info.product.productName"></el-input>
             </el-form-item>

             <el-form-item  label="商品价格">
                 <el-input v-model="info.product.price"></el-input>
             </el-form-item>

             <el-form-item  label="商品描述">
                 <el-input v-model="info.product.desc"></el-input>
             </el-form-item>

               <el-form-item>
                     <el-button type="success" @click="btnSubmitClick">确定</el-button>
               </el-form-item>
         </el-form>

    </el-dialog>


</div>


</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>
<script src="../lib/element-plus/dist/index.full.js"></script>
<script>


    const app = {
        data() {
            return {
                products: [],
                info:{
                     isVisible:false,
                     product:{
                         productName:'',
                         price:-1,
                         desc:''
                     }
                }
            }
        },
        mounted() {
            axios({
                url: 'http://localhost:8080/pro/list',
                method: 'get',
                dataType: 'json'
            }).then((res) => {
                this.products = res.data;
            })
        },
        methods:{
            btnSubmitClick(){

                 axios({
                      url:'http://localhost:8080/pro/edit',
                      method:'post',
                      dataType:'json',
                      params:this.info.product
                 }).then((res)=>{
                      if(res.data.success){
                          this.products = res.data.data;
                          this.info.isVisible = false;
                      }else{
                            alert("服务出现异常，操作失败！");
                      }
                 })
            }
        }
    }


    Vue.createApp(app)
        .use(ElementPlus)
        .mount('#app');

</script>


</html>